<template>
  <el-card v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.1)" class="board-hover">
    <div slot="header" class="header">
      <span class="hover-under" @click="handleJobTotal(1)">定时任务信息</span>
      <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right" @click="getlist()">
      </el-button>
      <span class="tip">每小时自动刷新:{{loadTime}}</span>
    </div>
    <div class="board">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="board-title">任务总数</div>
          <div class="board-text hover-under" @click="handleJobTotal(1)">{{ formatNum(aitjob.jobtotal) }}</div>
        </el-col>
        <el-col :span="12">
          <div class="board-title">活跃任务数</div>
          <div class="board-text hover-under" @click="handleJobTotal(2)">{{ formatNum(aitjob.jobtotal1) }}</div>
        </el-col>
        <el-col :span="12">
          <div class="board-title">昨日执行次数</div>
          <div class="board-text">{{ formatNum(aitjob.jobRun) }}次</div>
        </el-col>
        <el-col :span="12">
          <div class="board-title">昨日执行平均(每小时)</div>
          <div class="board-text">{{ formatNum(aitjob.jobRun1) }}次/小时</div>
        </el-col>
        <el-col :span="12">
          <div class="board-title">今日执行次数</div>
          <div class="board-text">{{ formatNum(aitjob.todayRun) }}次</div>
        </el-col>
        <el-col :span="12">
          <div class="board-title">今日执行平均(每小时)</div>
          <div class="board-text">{{ formatNum(aitjob.todayRun1) }}次/小时</div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import { getJobInfo } from "@/api/aitcommon/aitdashboard";
import { formatNumber } from "@/utils/ait.js";

export default {
  name: "aitJob",
  data() {
    return {
      aitjob: {},
      loading: false,
      loadTime: '',
      // 定时刷新(秒)
      timeSec: 60*60,
      timeChecked: true,
      timer: {},
    }
  },
  created() {
    this.getlist();

    // 设置定时刷新
    if (this.timeChecked) {
      this.timer = window.setInterval(this.getlist, this.timeSec * 1000);
    } else {
      window.clearInterval(this.timer);
    }
  },
  methods: {
    handleJobTotal(op){
      let queryParams={};
      if(op===1){
      }else if(op===2){
        queryParams={status:1};
      }

      // 参考 https://blog.csdn.net/qq_41206305/article/details/121494328
      // Vue this.$router.push() 获取不到params参数 https://blog.csdn.net/qq_59347596/article/details/130158869
      this.$router.push({
        // path: "/ait/aitconfig",
        name: "aittask",
        params:{ queryParams },
      });
    },
    formatNum(num){
      return formatNumber(num)
    },
    getlist() {
      this.loading = true;
      getJobInfo().then(res => {
        // console.info('getlist', res)
        this.loadTime = this.parseTime(new Date());
        this.aitjob = res.data;
      }).finally(() => {
        this.loading = false;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.board-hover {
  &:hover {
    box-shadow: 0 2px 12px 0 brown;
  }
}
.header{
  .tip {
  float: right;
  color: gray;
  font-size: 10px;
  margin-right: 10px;
  }
}

.board {
  .board-title {
    font-size: medium;
    color: white;
    text-align: center;
    padding: 15px;
    background-color:#304156;
    border-style: dashed;
    border-color: gray;
    border-width: 1px;
    border-bottom: none;
  }

  .board-text {
    font-size: 24px;
    color: darkslategray;
    text-align: center;
    padding: 15px;
    background-color: #E8F4FF ;
    margin-bottom: 12px;
    border-style: dashed;
    border-color: gray;
    border-width: 1px;
    border-top: none;

    &:hover {
      color: brown;
      text-shadow: 2px 2px 5px;
    }
  }
  
}
.hover-under {
    &:hover {
    color: brown;
    text-shadow: 2px 2px 5px;
    text-decoration: underline;
    cursor: pointer;
    }
}
</style>